<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录入自定义页面</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
    </style>

    <style type="text/css">
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 3px;
        }
        .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label {
            padding-right: 0px;
        }
        .el-tooltip__popper{ max-width:20%; }
        .el-tooltip__popper{
            display: none;
        }

        .el-table{
            /*font-weight: bold;*/
            overflow: visible !important;
        }

        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }

        /**列表内容超出自动换行**/
        /*.layui-table-cell {
            height: auto;
            overflow:visible;white-space:normal;text-overflow:clip;
            word-break: break-all;
        }*/


        /* 列表样式修改*/
        /* 去掉最下面的那一条线 */
        .el-table::before {
            height: 0px;
        }

        /* 表格斑马自定义颜色 */
        .el-table__row.warning-row {
            background: #F1F1F1;
        }

        /* 合计颜色重置 */
        .el-table__footer-wrapper tbody td.el-table__cell {
            background: #fff;
        }

        table {
            border-color: black !important;
        }

        /** 改变边框颜色 */
        /* .el-table--border,
        .el-table--group {
            border: 1px solid #CCCCCC !important;
        } */

        /** 改变表格内竖线颜色 */
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
            border-right: 1px solid #CCCCCC !important;
        }

        /** 改变表格内行线颜色 */
        .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #CCCCCC !important;
        }

        .el-table thead tr th {
            border-color: #8c939d;

        }
        .el-table th.el-table__cell{
            background: #f5f7fa;
        }
        .el-table thead {
            color: #606266;
        }
        .el-table td{
            font-size: 14px;
            background: #dfefff6b;
        }

        .el-divider--horizontal {
            margin: 12px 0px;
        }
    </style>
</head>
<body>

<div id="app">

    <el-form ref="form"  label-width="125px"  size="small"  class="demo-form-inline" label-position="left" >

        <table border="0" style="text-align: center;" width="100%">
            <tr>
                <td>
                    <div style="border:#cccccc 1px solid;padding: 20px 20px;margin: 16px 50px;">
                        <el-form-item label="参保地">
                            <el-input v-model="form1.cbd" style="width: 280px" ></el-input>
                        </el-form-item>

                        <el-form-item label="生效时间">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form1.sxsj" style="width: 280px" ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="经办人">
                            <el-select v-model="form1.jbr" style="width: 280px" >
                                <el-option value="张月花" label="张月花"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="日期">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form1.rq" style="width: 280px" ></el-date-picker>
                        </el-form-item>
                    </div>

                </td>
                <td>
                    <div style="border:#cccccc 1px solid;padding: 20px 20px;margin: 16px 50px;" >
                        <el-form-item label="参保地">
                            <el-input v-model="form2.cbd" style="width: 280px" ></el-input>
                        </el-form-item>

                        <el-form-item label="生效时间">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form2.sxsj" style="width: 280px" ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="经办人">
                            <el-select v-model="form2.jbr" style="width: 280px" >
                                <el-option value="张月花" label="张月花"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="日期">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form2.rq" style="width: 280px" ></el-date-picker>
                        </el-form-item>
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style="border:#cccccc 1px solid;padding: 20px 20px;margin: 16px 50px;" >
                        <el-form-item label="参保地">
                            <el-input v-model="form3.cbd" style="width: 280px" ></el-input>
                        </el-form-item>

                        <el-form-item label="生效时间">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form3.sxsj" style="width: 280px" ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="经办人">
                            <el-select v-model="form3.jbr" style="width: 280px" >
                                <el-option value="张月花" label="张月花"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="日期">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form3.rq" style="width: 280px" ></el-date-picker>
                        </el-form-item>
                    </div>
                </td>
                <td>
                    <div style="border:#cccccc 1px solid;padding: 20px 20px;margin: 16px 50px;">
                        <el-form-item label="参保地">
                            <el-input v-model="form4.cbd" style="width: 280px" ></el-input>
                        </el-form-item>

                        <el-form-item label="生效时间">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form4.sxsj" style="width: 280px" ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="经办人">
                            <el-select v-model="form4.jbr" style="width: 280px" >
                                <el-option value="张月花" label="张月花"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="日期">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form4.rq" style="width: 280px" ></el-date-picker>
                        </el-form-item>
                    </div>
                </td>
            </tr>
        </table>

    </el-form>
</div>

<script>

var vm = new Vue({
    el: '#app',
    data: {
        parmsData:{},
        form1:{dyym:"1","cbd":"卢氏县","jbr":"张月花"},
        form2:{dyym:"2","cbd":"卢氏县","jbr":"张月花"},
        form3:{dyym:"3","cbd":"卢氏县","jbr":"张月花"},
        form4:{dyym:"4","cbd":"卢氏县","jbr":"张月花"},

    },
    created(){
        this.parmsData = getParams();
    },
    methods:{

    },
    computed: {

    }
})





//验证必填项
function verification() {

    return true;
}

function getData() {
    let dataObj = {"o1":vm.form1,"o2":vm.form2,"o3":vm.form3,"o4":vm.form4};
    return dataObj;
}


function setData(data) {
    if(Object.keys(data).length > 0){
        // vm.setFormData = data;
    }

}
</script>


</body>
</html>
